<template>
  <div class="list"
       ref="wapper">
    <div>
      <div class="list-area">
        <div class="title border-topbottom">
          <span>您的位置</span>
        </div>
        <div class="button-list">
          <div class="button-wrapper">
            <input class="button"
                   type="button"
                   :value="this.currentCity">
          </div>
        </div>
      </div>
      <div class="list-area">
        <div class="title border-topbottom">
          <span>热门城市</span>
        </div>
        <div class="button-list">
          <div class="button-wrapper"
               v-for="item in this.hotCity"
               :key="item.id">
            <input class="button"
                   type="button"
                   :value="item.name"
                   @click="handleCityClick(item.name);">
          </div>
        </div>
      </div>
      <div class="list-area"
           v-for="(item,itemKey) in this.cities"
           :key="item.id"
           :ref="itemKey">
        <div class="title border-topbottom">
          <span>{{itemKey}}</span>
        </div>
        <div class="area"
             v-for="detail of item"
             :key="detail.id"
             @click="handleCityClick(detail.name);">
          {{detail.name}}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import bscroll from "better-scroll";
import { mapState, mapActions } from "vuex";
export default {
  name: "cityList",
  props: {
    hotCity: Array,
    cities: Object,
    letter: String
  },
  computed: {
    ...mapState({
      currentCity: "city"
    })
  },
  methods: {
    handleCityClick(city) {
      //this.$store.dispatch("changeCity", city);
      //this.$store.commit("changeCity", city)    直接使用commit提交到mutations也是可以的
      this.changeCity(city);
      this.$router.push({ path: "/" });
    },
    ...mapActions(["changeCity"])
  },
  watch: {
    letter() {
      if (this.letter) {
        const element = this.$refs[this.letter][0];
        this.scroll.scrollToElement(element);
      }
    }
  },
  mounted() {
    this.scroll = new bscroll(this.$refs.wapper);
    //兄弟组件可使用bus.$emit和bus.on 事件总线的方式
    this.$bus.$on("wordChangeBus", letter => {
      const element = this.$refs[letter][0];
      this.scroll.scrollToElement(element);
    });
  }
};
</script>

<style lang="stylus" scoped>
.list {
  position: absolute;
  top: 1.78rem;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;

  .list-area {
    .title {
      height: 0.5rem;
      line-height: 0.5rem;
      background-color: #eee;
      text-align: left;
      padding-left: 0.15rem;
      font-size: 0.15rem;
      box-sizing: border-box;
    }

    .border-topbottom {
      &:before {
        border-color: #ccc;
      }

      &:after {
        border-color: #ccc;
      }
    }

    .button-list {
      padding: 0.1rem 0.6rem 0.1rem 0.1rem;
      overflow: hidden;

      .button-wrapper {
        float: left;
        width: 33.33%;
        margin: 0.1rem 0;
        padding: 0 0.1rem;
        box-sizing: border-box;

        .button {
          text-align: center;
          width: 100%;
          background-color: #fff;
          border: 0.02rem solid #aaa;
          padding: 0.05rem 0;
          font-size: 0.2rem;
          color: #666;
          border-radius: 0.1rem;
        }
      }
    }

    .area {
      height: 0.46rem;
      line-height: 0.46rem;
      padding: 0.05rem 0.2rem;
      color: #000;
      font-size: 0.2rem;
      font-weight: 600;
      border-bottom: 0.02rem solid #ddd;
      text-align: left;
    }
  }
}
</style>
